<template>
  <div id="monthByDay" class="chart_data_div" style="height: 202px;width: 324px"></div>

</template>
<script>
import fun from "../assets/js/util";
import {monthByDayApi} from "@/api";

export default {
  name: "monthByDay.vue",
    data() {
    return {


    }
  },
  mounted() {

  },
  methods: {

    //查询

    selectData() {
      let _this = this;
      monthByDayApi({})
          .then(res => {
            let data = res.data;
            let charts = this.$echarts.init(document.getElementById("monthByDay"));
            charts.setOption({
              grid: {
                left: '35',
                right: '10',
                top: '15',
                bottom: '27',
              },
              tooltip: {
                trigger: 'axis'  //触发类型
              },

              xAxis: {
                data: data.xData,
                axisLine: {  //坐标轴轴线相关设置
                  show: true,
                  lineStyle: {
                    color: '#0dd7ea',
                    width: 2
                  }
                },
                axisTick: {  //坐标轴刻度相关设置
                  show: true,
                  alignWithLabel: true,  //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                  length: 10,
                  lineStyle: {
                    color: '#0dd7ea',
                    width: 2
                  }
                },
                axisLabel: {  //坐标轴刻度标签的相关设置
                  show: true,
                  color: '#00c1df',
                  fontWeight: 'bold',
                  margin: 14
                },
              },

              yAxis: {
                axisLine: {  //坐标轴轴线相关设置
                  show: true,
                  lineStyle: {
                    color: '#0dd7ea',
                    width: 2
                  }
                },
                axisLabel: {  //坐标轴刻度标签的相关设置
                  show: true,
                  color: '#00c1df',
                  fontWeight: 'bold',
                  margin: 14
                },
                splitLine: {  //标轴在 grid 区域中的分隔线
                  show: true,
                  lineStyle: {
                    color: '#0dd7ea',
                    width: 1,
                    opacity: 0.2
                  }
                },
                axisTick: {  //坐标轴刻度相关设置
                  show: true,
                  alignWithLabel: true,  //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                  length: 10,
                  lineStyle: {
                    color: '#0dd7ea',
                    width: 2
                  }
                },
              },
              series: [
                {
                  data: data.yData,
                  type: 'bar',
                }
              ]
            })

          }).catch(() => {
      });
    },

  },
  created() {
    this.selectData();
  },
}
</script>
